<template>
  <v-data-table
    :value="selected"
    :headers="headers"
    :items="items"
    :options.sync="options"
    :server-items-length="total"
    :search="search"
    :loading="loading"
    :footer-props="{
      showFirstLastPage: true,
      'items-per-page-options': [10, 50, 1000]
    }"
    item-key="id"
    loading-text="Loading... Please wait"
    show-select
    @input="updateSelected"
  >
    <template v-slot:top>
      <v-text-field
        v-model="search"
        prepend-inner-icon="search"
        label="Search"
        single-line
        hide-details
        filled
      />
    </template>
    <template v-slot:item.text="{ item }">
      <v-edit-dialog>
        <span class="d-flex d-sm-none">{{ item.text | truncate(50) }}</span>
        <span class="d-none d-sm-flex">{{ item.text | truncate(200) }}</span>
        <template v-slot:input>
          <v-textarea
            :value="item.text"
            label="Edit"
            autofocus
            @change="handleUpdateDocument({ id: item.id, text: $event })"
          />
        </template>
      </v-edit-dialog>
    </template>
    <!-- <template v-slot:item.createdAt="{ item }">
      {{ formarttime(item.created_at) }}
    </template> -->
    <template v-slot:item.text="{ item }">
      <v-edit-dialog>
        <span class="d-flex d-sm-none">{{ item.text | truncate(50) }}</span>
        <span class="d-none d-sm-flex">{{ item.text | truncate(200) }}</span>
        <template v-slot:input>
          <v-textarea
            :value="item.text"
            label="Edit"
            autofocus
            @change="handleUpdateDocument({ id: item.id, text: $event })"
          />
        </template>
      </v-edit-dialog>
    </template>
    <template v-slot:item.action="{ item }">
      <v-btn small color="primary text-capitalize" @click="toLabeling(item)">
        Annotate
      </v-btn>
    </template>
  </v-data-table>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
export default {
  async fetch() {
    await this.getDocumentList({
      projectId: this.$route.params.id,
      userId: 0,
      ...this.$route.query
    })
  },

  data() {
    return {
      search: '',
      options: {},
      headers: [
        {
          text: '文本',
          align: 'left',
          value: 'text',
          sortable: false
        },
        {
          text: '创建时间',
          align: 'center',
          value: 'created_at',
          sortable: false
        },
        {
          text: 'Action',
          align: 'left',
          value: 'action',
          sortable: false
        }
      ]
    }
  },

  computed: {
    ...mapState('documents', ['items', 'selected', 'loading', 'total']),
    ...mapGetters('projects', ['getLink'])
  },

  watch: {
    selected(val, oldval) {
      console.log(val)
      console.log(oldval)
    },
    '$route.query': '$fetch',
    options: {
      handler(newvalue, oldvalue) {
        this.$router.push({
          query: {
            limit: this.options.itemsPerPage,
            offset: (this.options.page - 1) * this.options.itemsPerPage,
            q: this.search
          }
        })
      },
      deep: true
    },
    search() {
      this.$router.push({
        query: {
          limit: this.options.itemsPerPage,
          offset: 0,
          q: this.search
        }
      })
      this.options.page = 1
    }
  },

  methods: {
    ...mapActions('documents', ['getDocumentList', 'updateDocument']),
    ...mapMutations('documents', ['updateSelected']),

    // 时间格式化
    formarttime(time) {
      const differtime = time
      let day = Math.floor(differtime / (60 * 60 * 24))
      day = day >= 10 ? day : '0' + day
      let hour = Math.floor((differtime / (60 * 60)) % 24)
      hour = hour >= 10 ? hour : '0' + hour
      let minute = Math.floor((differtime / 60) % 60)
      minute = minute >= 10 ? minute : '0' + minute
      let second = Math.floor(differtime % 60)
      second = second >= 10 ? second : '0' + second
      return {
        day,
        hour,
        minute,
        second
      }
    },
    handleUpdateDocument(payload) {
      const data = {
        projectId: this.$route.params.id,
        ...payload
      }
      this.updateDocument(data)
    },

    toLabeling(doc) {
      const index = this.items.findIndex(item => item.id === doc.id)
      const offset = (this.options.page - 1) * this.options.itemsPerPage
      const page = offset + index + 1
      this.$router.push({
        path: `/projects/${this.$route.params.id}/${this.getLink}`,
        query: {
          page,
          q: this.search
        }
      })
    }
  }
}
</script>
